<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../includes.jsp"%>
<script type="text/javascript" src="<%=basePath%>/resources/js/plugin/template/jtemplates.js"></script>
<script type="text/javascript" src="<%=basePath%>/resources/js/plugin/form/jquery.form.js"></script>
<div class="row">
	<div class="span9" id="blogDetail">
		<c:out value="${blog.blogContent}" escapeXml="false"></c:out>
	</div>
</div>

<div id="blogComments" class="row">
	<div id="postComment" class="form-inline">
		<form action="<%=basePath%>postComment" method="POST" id="myForm">
			<input type="hidden" value="${blog.blogId }" name="belongToBlog">
			<div class="span3">
				<input type="text" id="guestName" name="guestName">	
				<input type="text" id="guestName1" name="guestName1">
			</div>
			<div class="span3">
				<textarea row="5" name="commentContent" id="commentContent"></textarea>
			</div>
			<button type="submit" class="btn" id="postComment">Post</button>
			<span id="output"></span>
		</form>
	</div>
	<div id="commentsList">
	</div>
</div>
<textarea id="template" style="display: none">
    {#foreach $T.rows as record}
    <div class="eachComment">
        <div class="guestName">
        	{$T.record.guestName }
        </div>
        <div class="commentContent">
            {$T.record.commentContent}
        </div>
    </div>
    {#/for}
</textarea>
<script type="text/javascript">
	$(document).ready(function() {
		renderCommentData();
		var options = {
			beforeSubmit : showRequest, // pre-submit callback 
			success : showResponse,
			type : 'post', // 'get' or 'post', override for form's 'method' attribute 
			clearForm : true // clear all form fields after successful submit 
		};

		$('#myForm').submit(function() {
			$(this).ajaxSubmit(options);
			return false;
		});
	});

	function showRequest(formData, jqForm, options) {
		return true;
	}

	function showResponse(responseText, statusText) {
		$("#output").html(responseText.result);
		renderCommentData();
	}
	
	function renderCommentData(){
		var url = "<%=basePath%>/queryDetailPageComments";
		var blogId = "${blog.blogId }";
		$.getJSON(url,{"blogId":blogId},function(data){
			$("#commentsList").children().remove();
	        $("#commentsList").setTemplateElement("template", null, {filter_data:false});//获取模版元素id,不过滤html
	        $("#commentsList").processTemplate(data);//处理数据，渲染模版
		});
	}
</script>
<style>
	#blogDetail{
		padding:0px;
		margin:0px;
	}
	#myForm{
		margin: 3px;
	}
</style>
